<template>
  <view class="container">
    <!-- 导航栏 -->

    <!-- 轮播栏 -->
    <swiper class="swiper" indicator-dots indicator-color="#ffffff" indicator-active-color="#ff0000" autoplay circular>
      <swiper-item v-for="(item, index) in banners" :key="index" @click="goBanner(item)">
        <image class="banner" :src="item.image"></image>
      </swiper-item>
    </swiper>
    <!-- 分类栏 -->
    <scroll-view class="category" scroll-x>
      <text class="item" v-for="(item, index) in categories" :key="index" :class="{active: index === active}" @click="select(index)">{{item.name}}</text>
    </scroll-view>
    <!-- 视频列表 -->

	
	<scroll-view class="video-list" scroll-y>
	  <view class="video-container">
		  <view class="video-item" v-for="(item, index) in videoList" :key="index">
			<image class="cover" :src="item.coverUrl"  @click="goToPage(item.id)"></image>
			<view class="text-container" @click="goToPage(item.id)">
				<text class="title">{{item.title}}</text>
				<text class="info">up主：{{item.user.nickname}} · {{item.visitCount}}播放 · {{item.createTime}}</text>
			</view>
		  </view>
	  </view>
	</scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      banners: [
        {
          image: "/static/video-cover/2.jpg",
          url: "/pages/banner1/banner1"
        },
        {
          image: "/static/video-cover/3.jpg",
          url: "/pages/banner2/banner2"
        },
        {
          image: "/static/video-cover/4.jpg",
          url: "/pages/banner3/banner3"
        }
      ],
      // 分类数据
      categories: [
		  {
		    name: "全部",
		    type:"",
		  },
        {
          name: "娱乐",
		  type:"ENTERTAINMENT",
        },
        {
          name: "生活",
		  type:"LIFE",
        },
        {
          name: "学习",
		  type:"STUDY",
        },

      ],
      // 视频数据
      videos: [
        {
          cover: "/static/video-cover/1.jpg",
          title: "这是一个视频标题",
          info: "UP主 · 100万播放 · 3天前",
          url: "/pages/video-detail/video-detail",
        },
        {
          cover: "/static/video-cover/4.jpg",
          title: "这是另一个视频标题",
          info: "UP主 · 200万播放 · 2天前",
          url: "/pages/video-detail/video-detail",
        },
        {
          cover: "/static/video-cover/5.jpg",
          title: "这是第三个视频标题",
          info: "UP主 · 300万播放 · 1天前",
          url: "/pages/video-detail/video-detail",
        },
		{
		  cover: "/static/video-cover/6.jpg",
		  title: "第四个视频标题",
		  info: "UP主 · 300万播放 · 1天前",
		  url: "/pages/video-detail/video-detail",
		}
      ],
	  videoList:[],
      // 当前选中的分类索引
      active: 0,
      // 搜索关键词
      keyword: "",
	  type:'',
    };
  },
  onLoad(){
  		  console.log("进入1页面")
  		  // console.log("当前id:"+this.$store.state.id)
  		  // console.log("当前token:"+this.$store.state.token)
  		  uni.request({
  		  	  	method:'GET',
  		  	  	url:"http://47.97.114.13:8080/api/video/list?type="+this.type+"&current=1&pageSize=999",
			  header: {
				"Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiTk9STUFMIiwiaWQiOiIxIiwiZXhwIjoxNjkwMjk3ODA3fQ.XQHF1MMI03eK_0HYSmarG_3_SB2KK_W1RhT92hP1zXo",
				// this.$store.state.token,
			  },
  		  	  })
  		  	  .then(res => {
  				  //console.log(res);
  		  		  console.log(res[1].data.data);
				  if(res[1].data.success===true)
				  {
				  	this.videoList = res[1].data.data.list

				  }
				  else{
				  	uni.showToast({
				  	  title: "获取视频列表失败",
				  	  icon: "fail"
				  	});
				  }

  		  	  })
  	      },

  		  onPullDownRefresh(){
  		  		  console.log("刷新1页面")
  		  uni.request({
  		  	  	method:'GET',
  		  	  	url:"http://47.97.114.13:8080/api/video/list?type="+this.type+"&current=1&pageSize=999",
			  header: {
				"Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiTk9STUFMIiwiaWQiOiIxIiwiZXhwIjoxNjkwMjk3ODA3fQ.XQHF1MMI03eK_0HYSmarG_3_SB2KK_W1RhT92hP1zXo",
				// this.$store.state.token,
			  },
  		  	  })
  		  	  .then(res => {
  				  //console.log(res);
  		  		  console.log(res[1].data.data);
				if(res[1].data.success===true)
				{
					this.videoList = res[1].data.data.list

				}
				else{
					uni.showToast({
					  title: "刷新视频列表失败",
					  icon: "fail"
					});
				}
  		  	  })
  					  uni.stopPullDownRefresh()
  		  	      },
  methods: {
    // 跳转到搜索页面
    goSearch() {
      uni.navigateTo({
        url: "/pages/search/search"
      });
    },
    // 选择分类
    select(index) {
      this.active = index;
	  this.type = this.categories[index].type
	  console.log(this.type)
    },
    // 搜索操作
    search() {
      if (this.keyword) {
        uni.showToast({
          title: "搜索" + this.keyword,
          icon: "none"
        });
      }
    },
    // 跳转到轮播图页面
    goBanner(item) {
		console.log("goBanner")
      uni.navigateTo({
        url: item.url
      });
    },
    // 跳转到视频页面
    goVideo(item) {
      uni.navigateTo({
        url: item.url
      });
    },
	goToPage(id) {
		// "/pages/video-detail/video-detail"/
		// if (!url) return;
		uni.navigateTo({
			url: "/pages/video-detail/video-detail"+"?id="+id
		});
	}
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  background-color: #ffffff;
}
.logo {
  font-size: 36rpx;
  font-weight: bold;
}
.search-box {
   width :80%;
   height :60rpx;
   margin-left :10rpx;
   margin-right :10rpx;
   border-radius :30rpx;
   background-color :#f0f0f0
}
.search-input {
   width :100%;
   height :60rpx;
   border :none;
   outline :none;
   padding-left :20rpx;
   padding-right :20rpx
}
.swiper {
  width: 100%;
  height: 400rpx;
}
.banner {
  width: 100%;
  height: 400rpx;
}
.category {
   display :flex;
   text-align: center;
   width :100%;
   height :80rpx;
   background-color :#ffffff;
   margin-top: 10rpx;
}
.item {
   font-size :35rpx;
   margin :10rpx;
   color :#999999
}
.active {
   color :#ff0000
}
.video-list {
/* 	height: 100%; */
   width :95%;
   margin: 0 auto;
}
.video-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.video-item {
   width: 49%;
   margin-bottom: 2px;
   height: 360rpx;
}
.cover {
   width :100%; 
   height :240rpx;
   border-radius: 20rpx;
}
.text-container {
    display: flex;
    flex-direction: column;
    padding-left: 10rpx;
    padding-right: 10rpx;
    padding-bottom: 10rpx;
}
.title {
   font-size :28rpx;
   padding-left :10rpx;
   padding-right :10rpx
}
.info {
   font-size :24rpx;
   color :#999999;
   padding-left :10rpx;
   padding-right :10rpx;
   padding-bottom :10rpx
}
</style>
